<template>
  <el-dialog title="权限设置" :visible="visible" width="400px" @close="visible=false">
    <el-container v-loading="loading" class="tab-container">
      <el-main style="padding:0px;">
        <el-form label-width="80px">
          <el-form-item label="用户组">
            <el-input v-model="userGroupName" readonly />
          </el-form-item>
          <el-form-item>
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="id"
              :default-expanded-keys="defaultExpandedKeys"
              show-checkbox
              :default-checked-keys="checkedNodesId"
            />
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
    <div slot="footer" class="dialog-footer">
      <el-button v-permission="'system:userGroup:permission'" type="primary" @click="save">保存</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'userGroup-permission',
  data() {
    return {
      userGroupId: '',
      userGroupName: '',
      treeData: [],
      loading: false,
      visible: false,
      checkedNodesId: [],
      permissionIdArray: [],
      defaultExpandedKeys: []
    }
  },

  methods: {
    show(id, name) {
      this.userGroupId = id
      this.userGroupName = name
      this.getData(id)
      this.visible = true
    },
    getData() {
      this.loading = true
      // 获取所有权限项树
      this.$api.system.permission.tree()
        .then(
          res => {
            this.treeData = res.data
            // 重置选中节点为空，避免打开时使用上次数据
            this.checkedNodesId = []
            // 默认展开根节点
            this.defaultExpandedKeys.push(this.treeData[0].id)
            // 获取选中的节点
            this.getCheckedNodes()
          }
        ).finally(() => {
          this.loading = false
        })
    },
    getCheckedNodes() {
      this.$api.system.userGroup.getPermission(this.userGroupId)
        .then(
          res => {
            // 获取权限项
            this.permissionIdArray = res.data
            this.getLeafNodeChecked(this.treeData)
            this.$refs.tree.setCheckedKeys(this.checkedNodesId)
          }
        )
    },
    getLeafNodeChecked(node) {
      // 遍历树节点，设置
      for (const treeNode of node) {
        // 如果节点有子节点，那他的选中状态不被考虑，继续往下找
        if (treeNode.children && treeNode.children.length > 0) {
          this.getLeafNodeChecked(treeNode.children)
        } else {
          // 是叶子节点，如果是check状态就记录
          if (this.permissionIdArray.includes(treeNode.id)) {
            this.checkedNodesId.push(treeNode.id)
          }
        }
      }
    },
    save() {
      this.loading = true
      // 获取半选节点ID
      const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      // 拼接全选节点ID
      const permissionIdList = halfCheckedKeys.concat(this.$refs.tree.getCheckedKeys())
      // 将全选+半选节点传后端
      this.$api.system.userGroup.savePermission(this.userGroupId, { permissionIdList: permissionIdList })
        .finally(() => {
          this.loading = false
          this.close()
        })
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style scoped>
.tab-container {
  padding: 15px;
}
</style>
